<template>
    <view class="p32">
        <uv-form :model="formData" label-width="160rpx" :labelStyle="{ fontSize: '28rpx' }">
            <uv-form-item label="行政区划">
                <uv-input v-model="formData.cityName" readonly>
                </uv-input>
            </uv-form-item>
            <uv-form-item label="日期">
                <uv-input v-model="formData.time" readonly @click="openCalendars">
                </uv-input>
            </uv-form-item>
        </uv-form>
        <view class="df">
            <view class="f1 mr-30">
                <uv-button type="primary" @click="getDuty" :loading="loading">查询</uv-button>
            </view>
            <view class="f1">
                <uv-button @click="handerRest">重置</uv-button>
            </view>
        </view>
        <view class="duty-p">
            <view class="du-peo">
                <image src="@/static/img/home/duty.png"></image>
                <view class="p-name">值班人员</view>
            </view>

            <view class="lis-box">
                <view class="title">防治总值班：</view>
                <view class="perpor">
                    <view v-for="(item, index) in zList" :key="index">{{ item.name }}<text v-if="item.phone">({{
                        item.phone }})</text></view>
                </view>
            </view>

            <view class="lis-box">
                <view class="title">今日带班领导：</view>
                <view class="perpor">
                    <view v-for="(item, index) in dList" :key="index">{{ item.name }}<text v-if="item.phone">({{
                        item.phone }})</text></view>
                </view>
            </view>

            <view class="lis-box">
                <view class="title">值班员：</view>
                <view class="perpor">
                    <view v-for="(item, index) in bList" :key="index">{{ item.name }}<text v-if="item.phone">({{
                        item.phone }})</text></view>
                </view>
            </view>

            <view class="lis-box">
                <view class="title">值班员：</view>
                <view class="perpor">
                    <view v-for="(item, index) in wList" :key="index">{{ item.name }}<text v-if="item.phone">({{
                        item.phone }})</text></view>
                </view>
            </view>

            <!-- <view class="lis-box">
					<view class="title">今日晚班带班领导：</view>
					<view class="perpor">
						<view v-for="(item, index) in daytimeLeadership" :key="index">{{item.name}}({{item.phone}})
						</view>
					</view>
				</view> -->
            <!-- <view class="lis-box">
					<view class="title">白班值班负者：</view>
					<view class="perpor">
						<view v-for="(item, index) in dayDutyLeader" :key="index">{{item.name}}({{item.phone}})</view>
					</view>
				</view>
				<view class="lis-box">
					<view class="title">晚班值班负者：</view>
					<view class="perpor">
						<view v-for="(item, index) in nightDutyLeader" :key="index">{{item.name}}({{item.phone}})</view>
					</view>
				</view> -->



        </view>
    </view>
    <uv-calendars ref="calendars" @confirm="confirm" />
</template>

<script lang="ts" setup>
import { GetbeOnDuty_API } from '@/server/home';
import { getLoginMsg } from '@/utils/util';
import dayjs from 'dayjs';



const formData = ref({
    cityName: getLoginMsg()?.AdminName,
    address: getLoginMsg()?.AdminCode,
    time: dayjs().format('YYYY-MM-DD')
})
const calendars = ref(null)
const openCalendars = () => {
    calendars.value.open()
}
const confirm = (e) => {
    formData.value.time = e.fulldate
}
onLoad(() => {
    getDuty()
})
const zList = ref([])
const dList = ref([])
const bList = ref([])
const wList = ref([])
const daytimeLeadership = ref([])
const dayDutyLeader = ref([])
const nightDutyLeader = ref([])
const loading = ref(false)
const getDuty = async () => {
    try {
        loading.value = true
        const res = await GetbeOnDuty_API({
            address: formData.value.address,
            time: formData.value.time
        })
        if (res.IsSuccess) {
            zList.value = res.data.fangZhiZongZhiBan
            dList.value = res.data.jinRidaiBanlingDao
            bList.value = res.data.baiBanZhiBanRenYuan
            wList.value = res.data.wangBanZhiBanRenYuan
            daytimeLeadership.value = res.data.daytimeLeadership
            dayDutyLeader.value = res.data.dayDutyLeader
            nightDutyLeader.value = res.data.nightDutyLeader
        }
    } finally {
        loading.value = false
    }

}
const handerRest = () => {
    formData.value = {
        cityName: getLoginMsg()?.AdminName,
        address: getLoginMsg()?.AdminCode,
        time: dayjs().format('YYYY-MM-DD')
    }
    getDuty()
}
</script>

<style lang="scss" scoped>
.duty-p {
    width: 100%;
    margin-top: 20rpx;
    border-radius: 5rpx;
    border: solid 2rpx #D8D8D8;

    .du-peo {
        display: flex;
        justify-content: flex-start;
        padding: 10rpx 20rpx;
        align-items: center;
        border-bottom: solid 2rpx #D8D8D8;

        .p-name {
            margin-left: 20rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #1F87C6;
        }

        image {
            height: 45rpx;
            width: 45rpx;
        }
    }

    .lis-box {
        padding: 10rpx;
        display: flex;
        justify-content: flex-start;
        font-size: 28rpx;

        .title {
            // flex: 1;
        }

        .perpor {
            flex: 1;
            flex-wrap: wrap;
            margin-left: 20rpx;
        }
    }
}
</style>
